<template>
	<view class="orderGoods">
    <!-- TODO 芋艿：待接入 -->
    <view class='total' v-if="is_behalf"><text>
				{{$t(`代付金额`)}}：
				<text class="pay-price">￥{{pay_price || 0}}</text>
			</text>
		</view>
		<view class='total' v-else-if="!is_behalf">{{$t(`共`)}}{{totalNmu}}{{$t(`件商品`)}}</view>

		<view class='goodWrapper'>
			<view class='' :class="{op: item.is_valid !== undefined && !item.is_valid}" v-for="(item,index) in cartInfo" :key="index"
				@click="jumpCon(item.spuId)">
				<view class="item acea-row row-between-wrapper">
					<view class='pictrue' :class="{gray: item.is_valid !== undefined && !item.is_valid}">
						<image :src='item.picUrl' />
					</view>
					<view class='text'>
						<view class='acea-row row-between-wrapper'>
							<view class='name line1'>{{ item.spuName }}</view>
							<view class='num'>x {{ item.count }}</view>
						</view>
						<view class='attr line1' v-if="item.properties">
							<text v-for="property in item.properties" style="padding-left: 2px">{{property.valueName}}</text>
						</view>
						<view class='money font-color pic' v-if="item.price">
							<text :class="{gray: item.is_valid !== undefined && !item.is_valid}">
								{{$t(`￥`)}}{{ (item.price / 100.0).toFixed(2) }}
							</text>
							<!-- TODO 芋艿：不支持自提 -->
              <text class="valid" v-if="item.is_valid !== undefined && !item.is_valid && shipping_type === 0">
                {{$t(`不支持配送`)}}
              </text>
							<!-- TODO 芋艿：不支持自提 -->
<!--							<text class="valid" v-if="!item.productInfo.store_mention && shipping_type === 1">{{$t(`不支持自提`)}}</text>-->
						</view>
						<view class='money font-color pic' v-else>
							<!-- TODO 芋艿：不支持自提 -->
							<text :class="{gray: item.is_valid !== undefined && !item.is_valid}">{{$t(`￥`)}}{{ item.price }}</text>
							<text class="valid" v-if="!item.is_valid && shipping_type === 0">{{$t(`仅支持到店`)}}</text>
							<text class="valid" v-if="!item.store_mention && shipping_type === 1">{{$t(`仅支持配送`)}}</text>
						</view>
						<view class='evaluate' v-if="item.commentStatus">{{$t(`已评价`)}}</view>
					</view>
				</view>
        <view class="botton-btn">
        <!-- TODO 芋艿：评价 -->
        <view class='logistics' v-if="!item.commentStatus && evaluate === 3 && pid !== -1 && isShow"
              @click.stop="evaluateTap(item.unique, orderId)">
          {{$t(`评价`)}}
        </view>
        <!-- TODO 芋艿：退款，各种操作的补全 -->
        <view class='logistics'
          v-if="paid && item.afterSaleStatus === 0 && !is_confirm && isShow && virtualType === 0"
          @click.stop="openSubcribe(item)">
          {{$t(`申请售后`)}}
        </view>
        <view class='logistics'
          v-if="paid && item.afterSaleStatus === 10 && !is_confirm && isShow && virtualType === 0"
          @click.stop="openSubcribe(item)">
          {{$t(`售后中`)}}
        </view>
        <view class='logistics'
              v-if="paid && item.afterSaleStatus === 20 && !is_confirm && isShow && virtualType === 0"
              @click.stop="openSubcribe(item)">
          {{$t(`退款成功`)}}
        </view>
				<!-- TODO 芋艿：收货 -->
				<view class="rig-btn" v-if="status_type === 2 && index === cartInfo.length - 1">
					<view v-if="delivery_type === 'express'" class="logistics" @click.stop="logistics(orderId)">{{$t(`查看物流`)}}</view>
					<view class="logistics sure" v-if="status_type === 2" @click.stop="confirmOrder(orderId)">{{$t(`确认收货`)}}</view>
				</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			// 订单状态
			statusType: {
				type: Number,
				default: 0,
			},
			virtualType: {
				type: Number,
				default: 0,
			},
			evaluate: { // 是否展示评价按钮，默认（0）不展示，传递 3 则展示
				type: Number,
				default: 0,
			},
			oid: {
				type: Number,
				default: 0,
			},
			paid: { // true 已支付 false 未支付
				type: Boolean,
				default: false,
			},
			cartInfo: {
				type: Array,
				default: function() {
					return [];
				}
			},
			orderId: {
				type: String,
				default: '',
			},
			shipping_type: {
				type: Number,
				default: -1,
			},
			delivery_type: {
				type: String,
				default: '',
			},
			pay_price: {
				type: String,
				default: '',
			},
			jump: {
				type: Boolean,
				default: false,
			},
			is_confirm: {
				type: Boolean,
				default: false,
			},
			// is_behalf 是否是代付列表
			is_behalf: {
				type: Boolean,
				default: false,
			},
			jumpDetail: {
				type: Boolean,
				default: false,
			},
			index: {
				type: Number,
				default: 0,
			},
			pid: {
				type: Number,
				default: 0,
			},
			refund_status: {
				type: Number,
				default: 0,
			},
			status_type: {
				type: Number,
				default: 0,
			},
			isShow: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				totalNmu: 0,
				operationModel: false,
				status: "",
			};
		},
		watch: {
			cartInfo: function(nVal, oVal) {
				let num = 0
				nVal.forEach((item, index) => {
					num += item.count
				})
				this.totalNmu = num
			}
		},
		mounted() {
			let num = 0
			this.$nextTick(() => {
				this.cartInfo.forEach((item, index) => {
					num += item.cart_num
				})
				this.$set(this, 'totalNmu', num)
			})
		},
		methods: {
      // TODO 芋艿：未接入
			evaluateTap: function(unique, orderId) {
				uni.navigateTo({
					url: "/pages/goods/goods_comment_con/index?unique=" + unique + "&uni=" + orderId
				})
			},
      // TODO 芋艿：未接入
      jumpCon(id) {
				if (this.jump) {
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${id}`
					})
				} else if (this.jumpDetail) {
					uni.navigateTo({
						url: `/pages/goods/order_details/index?order_id=${this.orderId}`
					})
				}
			},
      // TODO 芋艿：未接入
      logistics(order_id) {
				uni.navigateTo({
					url: '/pages/goods/goods_logistics/index?orderId=' + order_id
				})
			},
      // TODO 芋艿：未接入
      confirmOrder(orderId) {
				this.$emit('confirmOrder', orderId)
			},
      // TODO 芋艿：未接入
      changeOperation() {
				this.operationModel = !this.operationModel
			},
      // TODO 芋艿：未接入
      openSubcribe(item) {
				this.$emit('openSubcribe',
					`/pages/goods/goods_return/index?orderId=${this.orderId}&itemId=${item.id}`)
			},
		}
	}
</script>

<style scoped lang="scss">
	.fontcolor {
		color: #e93323;
	}

	.orderGoods {
		background-color: #fff;
	}

	.orderGoods .total {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		// height: 86rpx;
		padding: 0 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
		font-size: 30rpx;
		color: #282828;
		line-height: 86rpx;
		box-sizing: border-box;


	}

	.botton-btn {
		display: flex;
		align-items: right;
		justify-content: flex-end;
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.rig-btn {
		display: flex;
		align-items: center;

		.refund {
			font-size: 26rpx;
			color: #e93323;
		}

		.done {
			font-size: 26rpx;
			color: #F19D2F;
		}
	}

	.logistics {
		// height: 46rpx;
		line-height: 30rpx;
		color: #666666;
		font-size: 20rpx;
		border: 1px solid #CCCCCC;
		border-radius: 30rpx;
		padding: 8rpx 22rpx;
		margin-left: 10rpx;
	}

	.sure {
		color: #e93323;
		border: 1px solid #e93323;
	}

	.more-operation {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;
		color: #bbb;
	}

	.b-top {
		margin-left: 30rpx;
		margin-right: 30rpx;
		border-top: 1px solid #f0f0f0
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: all 0.1s;
	}

	.fade-enter,
	.fade-leave-to

	/* .fade-leave-active below version 2.1.8 */
		{
		opacity: 0;
		transform: translateY(-10px);
	}

	.op {
		opacity: 0.5;

	}

	.gray {
		filter: grayscale(100%);
		filter: gray;
	}

	.pic {
		display: flex;
		justify-content: space-between;
	}

	.valid {
		margin-left: 20rpx;
		font-size: 24rpx;
	}

	.pay-price {
		color: #E93323;
	}
</style>
